<template>
	<!-- 我的合作 -->
	<view class="tribe_posts_page">
		<!-- <view class="input-group">
			<view class="input-row">
				<text class="title">类型</text>
				<view class="picker row align-width">
					<picker @change="categoryChange" :value="categorValue" disabled="isShow" range-key="name"
						:range="categorOption" class="pickstyle">
						<input class="padding-10" disabled="true" placeholder="请选择" :value="company.categoryName" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
		</view> -->
		<view class="head_top">
			<view class="head_left">
				<image :src="company.avatar" mode="aspectFill"></image>
				<view class="title_box">
					<view class="user_title">{{ company.nickname }}</view>
					<view class="user_desc">{{ company.createTime }}发布</view>
				</view>
			</view>
			<view class="head_right" @click="goToReport">举报</view>
		</view>
		<view class="content_title">
			<view class="text_title">{{ company.title }}</view>
			<view class="text_type">{{ company.categoryName }}</view>
		</view>
		<view class="flex jcsb pad-left-20 pad-right-20">
			<view class="fs-26 fc-99">
				<view class="lok-icon">
					<image src="https://web.suqzp.com/public/look.png"></image>
				</view>
				{{ company.readCount }}
			</view>
			<view class="fs-26 fc-99">
				<view class="lok-icon">
					<image src="https://web.suqzp.com/public/zf.png"></image>
				</view>
				{{ company.shareCount }}
			</view>
			<view class="fs-26 fc-99">
				<view class="lok-icon">
					<image src="https://web.suqzp.com/public/zan.png"></image>
				</view>
				{{ company.likeCount }}
			</view>
			<view class="fs-26 fc-99">
				<view class="lok-icon">
					<image src="https://web.suqzp.com/public/info.png"></image>
				</view>
				{{ company.commentCount }}
			</view>
		</view>
		<view class="input-group mar-top-20">
			<!-- <view class="input-row border-bottom-1px">
				<text class="title">标题</text>
				<view class="input-row-item">
					<input class="padding-10" maxlength="11" disabled="isShow" type="number" placeholder="请输入标题"
						v-model="company.title" />
				</view>
			</view> -->
			<!-- 使用富文本组件 -->
			<view style="background-color: #fff;margin-top: 20rpx;padding: 20rpx;" v-html="company.content">
				<!-- <text class="title dis-block" style="padding: 0 0 20upx;">内容</text> -->
				<!-- <mp-html :content="company.content" lazy-load="true" /> -->
			</view>
			<view class="report-img flex mar-top-20">
				<view class="img-style" v-for="(element,index) in company.imgList" :key="index">
					<image :src="element"></image>
				</view>
			</view>
			<!-- <view class="input-row" style="align-items: inherit;" @click="goToEditable">
				<view class="input-row-item pad-top-30 pad-left-30" style="width: 510rpx;">
					<textarea class="remarktextarea" :maxlength="len" placeholder="这一刻的想法……"
						v-model="company.content"></textarea>
				</view>
			</view> -->
		</view>
		<view class="hr" style="background-color: #f6f6f6;height: 10px;"></view>
		<view class="user_comment" v-for="item in commentList">
			<view class="head_left">
				<image :src="item.avatar" mode=""></image>
				<view class="title_box">
					<view class="user_title">{{ item.nickname }}</view>
					<view class="user_desc">{{ item.createTime }}</view>
				</view>
			</view>
			<view class="user_content">
				{{ item.content }}
				<view style="text-align: right;margin-right: 20rpx;" @click="addTribeCommentData(item,'user')">
					回复
				</view>
			</view>
			<view class="comment_text" v-for="element in item.child">
				<view class="comment_top">
					<view class="flex center-algin">
						<image :src="element.avatar" mode=""></image>
						<view class="user_title">{{ element.nickname }}</view>
						<view class="">
							<text class="mar-left-10" style="color: #ccc;">回复</text>
							<text class="mar-left-10">{{ element.replayNickname }}</text>
						</view>
					</view>
				</view>
				<view class="comment_conten">
					{{ element.content }}
					<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
						<view style="color: #ccc;">{{ element.createTime }}</view>
						<view style="color: #ccc;" @click="addTribeCommentData(element,'user')">回复</view>
					</view>
				</view>
			</view>
			<view class="hr" style="background-color: #f6f6f6;height: 5rpx;"></view>
		</view>
		<view class="hr" style="height: 85rpx;"></view>
		<view class="btn-row">
			<view class="input_comment">
				<input type="text" :focus="isFocus" v-model="contentText" placeholder="请输入" />
			</view>
			<view class="icon_box">
				<view class="fs-26 fc-99" v-if="!isLike" @click="changeLike">
					<view class="lok-icon">
						<image src="https://web.suqzp.com/public/zan.png"></image>
					</view>
					{{ company.likeCount }}
				</view>
				<view class="fs-26 fc-99" v-else @click="changeLike">
					<view class="lok-icon">
						<image src="https://web.suqzp.com/public/zan-hover.png"></image>
					</view>
					{{ company.likeCount }}
				</view>
				<view class="fs-26 fc-99">
					<view class="lok-icon">
						<image src="https://web.suqzp.com/public/info.png"></image>
					</view>
					{{ company.commentCount }}
				</view>
				<view class="send_btn">
					<button type="default" @click="sendComment">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				company: {
					categoryId: '',
					title: '',
					content: '',
				},
				len: 500,
				categorOption: [],
				userIntegration: 0,
				configIntegral: 0,
				isShow: false, // 查看模式
				postsId: '', // 帖子id
				isFocus: false, // 获取焦点
				commentForm: {}, // 回复数据
				contentText: '', // 回复内容
				commentList: [], // 回复记录
				isLike: false, // 是否点赞
				likeType: 'add', // 点赞类型
				likeInfo: {}, // 点赞信息
				isSharePage: false, // 是否分享页面
			}
		},
		onLoad(option) {
			console.log('进入详情页面')
			this.getCategory()
			if (option && option.id) {
				this.postsId = option.id
				// 获取帖子信息
				this.getPostsInfo()
				// 判断是否点赞
				this.isLikeHandle()
				// 阅读量加加
				this.$apis.collegeReadAdd(option.id)
				this.getCollegeCommentListInfo()
			}
			// 判断是否从分享页面进入 只可查看
			if (option && option.isShare) {
				this.isSharePage = option.isShare
			}
		},
		methods: {
			// 获取帖子信息
			getPostsInfo() {
				this.$apis.getCollegePostsById(this.postsId).then(res => {
					this.isShow = true;
					res.data.imgList = res.data.imgUrl.split(',');
					this.company = res.data
					let categoryItem = this.categorOption.find(item => {
						return item.id == res.data.categoryId
					})
					console.log('categoryItem-----', categoryItem)
					this.company.categoryName = categoryItem.name;
					console.log('this.company', this.company)
				})
			},
			// 获取评论列表
			getCollegeCommentListInfo() {
				let params = {
					postsId: this.postsId
				}
				this.$apis.getCollegeCommentList(params).then(res => {
					this.commentList = this.handleTree(res.rows)
				})
			},
			// 判断此帖子是否已经点赞过了
			isLikeHandle() {
				// 分享页面查看不判断
				if (this.isSharePage) return;
				// 帖子id 加wxUserId 查询点赞表
				let params = {
					postsId: this.postsId,
					wxUserId: this.userInfo.id
				}
				if (!this.userInfo.id) return;
				this.$apis.getCollegeLikeList(params).then(res => {
					if (res.total != 0) {
						this.isLike = true
						this.likeType = 'delete'
						this.likeInfo = res.rows[0]
					} else {
						this.isLike = false
						this.likeType = 'add'
						this.likeInfo = {}
					}
				})
			},
			//微信分享
			onShareAppMessage(res) {
				// 无法判断是否分享成功 只要点击分享就算分享成功
				// 分享数增加
				this.$apis.collegeShareAdd(this.postsId)
				return {
					// path 需要在末尾拼接id
					title: this.company.title,
					path: `/pages/user/person/busines/posts-show?id=${this.postsId}&isShare=true`
				}
			},
			//朋友圈
			onShareTimeline(res) {
				// 无法判断是否分享成功 只要点击分享就算分享成功
				// 分享数增加
				this.$apis.collegeShareAdd(this.postsId)
				return {
					// query查询字符串
					query: `id=${this.postsId}&isShare=true`,
					title: this.company.title,
				}
			},
			// 点赞操作 新增或修改
			changeLike() {
				// 分享页面不可点赞
				if (this.isSharePage) return uni.showToast({
					title: '分享查看，不可点赞！',
					icon: 'none'
				});
				if (this.likeType == 'add') {
					// 新增点赞记录
					let params = {
						postsId: this.postsId,
						wxUserId: this.userInfo.id,
					}
					this.$apis.addCollegeLike(params).then(res => {
						if (res) {
							this.isLikeHandle()
							this.getPostsInfo()
							uni.showToast({
								title: '点赞成功！',
								icon: 'none'
							});
						}
					})
				} else {
					// 删除点赞记录
					this.$apis.deleteCollegLike(this.likeInfo.id).then(res => {
						if (res) {
							this.isLikeHandle()
							this.getPostsInfo()
							uni.showToast({
								title: '已取消！',
								icon: 'none'
							});
						}
					})
				}
			},
			// 新增评论
			addTribeCommentData(data, type) {
				// 分享查看不可评论
				if (this.isSharePage) return uni.showToast({
					title: '分享查看，不可评论！',
					icon: 'none'
				});
				this.commentForm = this.$options.data().commentForm;
				// 获取输入框焦点
				this.isFocus = true;
				if (type == 'user') {
					// 传回复人id 帖子id 个人id 关联id
					this.commentForm.postsId = this.postsId
					this.commentForm.wxUserId = this.userInfo.id
					this.commentForm.replayUserId = data.wxUserId
					this.commentForm.replayCommentId = data.id
				}
			},
			// 发送评论
			sendComment() {
				// 分享查看不可评论
				if (this.isSharePage) return uni.showToast({
					title: '分享查看，不可评论！',
					icon: 'none'
				});
				if (!this.contentText) {
					return uni.showToast({
						title: '回复内容不可为空！',
						icon: 'none'
					});
				}
				this.commentForm.content = this.contentText
				this.commentForm.postsId = this.postsId
				this.commentForm.wxUserId = this.userInfo.id
				this.$apis.addCollegeComment(this.commentForm).then(res => {
					if (res.code == 200) {
						this.commentForm = this.$options.data().commentForm;
						this.contentText = this.$options.data().contentText;
						this.getCollegeCommentListInfo()
						this.getPostsInfo()
						return uni.showToast({
							title: '回复成功！',
							icon: 'none'
						});
					}
				})
			},
			// 跳转到举报页面 
			goToReport() {
				// 分享页面不可点赞
				if (this.isSharePage) return uni.showToast({
					title: '分享查看，不可操作！',
					icon: 'none'
				});
				uni.navigateTo({
					// 携带帖子id
					url: `./tribe_report?postsId=${this.postsId}`
				})
			},
			// 时间排序后 数据处理
			handleTree(list) {
				let tree = [];
				let node = [];
				// 提取一级二级数据
				list.forEach((item) => {
					if (!item.replayCommentId) {
						tree.push(item);
					} else {
						node.push(item);
					}
				});
				// 数据匹配
				tree.forEach((item) => {
					node.forEach((element) => {
						if (item.id == element.replayCommentId) {
							if (!item.child) {
								item.child = [];
							}
							item.child.push(element);
						} else {
							if (!item.child) return;
							item.child.forEach((flag) => {
								if (flag.id == element.replayCommentId) {
									item.child.push(element);
								}
							});
						}
					});
				});
				return tree;
			},
			// 获取类别
			getCategory() {
				this.$apis.getCategoryList().then(res => {
					this.categorOption = res.data
				})
			},
			//类型
			categoryChange: function(e) {
				this.company.categoryId = this.categorOption[e.detail.value].id
				this.company.categoryName = this.categorOption[e.detail.value].name
			},
			// 编辑
			goToEditable() {
				if (this.isShow) return;
				let itemContent = encodeURIComponent(this.company.content)
				uni.navigateTo({
					url: `../editable/index?content=${itemContent}`
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #f6f6f6;

		.tribe_posts_page {
			background: #fff;

			.head_top {
				padding: 25rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.head_left {
					display: flex;
					align-items: center;

					.title_box {
						margin-left: 20rpx;

						.user_title {
							font-size: 28rpx;
							line-height: 48rpx;
						}

						.user_desc {
							color: #CCCCCC;
						}
					}
				}
			}

			.content_title {
				padding: 0 20rpx 10rpx;

				.text_title {
					margin: 20rpx 0;
					font-size: 38rpx;
				}

				.text_type {
					width: 150rpx;
					height: 50rpx;
					border-radius: 10rpx;
					background: rgba(253, 101, 83, 0.10196078431372549);
					text-align: center;
					line-height: 50rpx;
					color: #666666;
				}
			}

			.lok-icon {
				width: 44rpx;
				height: 44rpx;
				display: inline-block;
				margin-right: 6rpx;
				position: relative;
				top: 10rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					display: block;
				}
			}

			.user_comment {
				padding: 25rpx 20rpx 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.head_left {
					display: flex;
					align-items: center;

					.title_box {
						margin-left: 20rpx;

						.user_title {
							font-size: 28rpx;
							line-height: 48rpx;
						}

						.user_desc {
							color: #CCCCCC;
						}
					}
				}

				.user_content {
					padding-left: 100rpx;
					padding-bottom: 10rpx;
					margin-top: 10rpx;
				}

				.comment_text {
					margin-left: 100rpx;
					margin-bottom: 10rpx;
					background-color: rgb(249, 250, 251);
					padding: 25rpx;

					.comment_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-right: 15rpx;
						}
					}

					.comment_conten {
						padding-top: 12rpx;
					}
				}
			}
		}

		.input-group {
			border-radius: 8rpx;

			.border-bottom-1px {
				position: relative;

				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}

			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}

				.title {
					width: 25%;
					padding: 20upx 0;
					padding-left: 30upx;
					line-height: 50upx;
					color: #333;
				}

				.pickstyle {
					width: 460rpx;

					input {
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}

				.input-row-item {
					width: 568rpx;

					.remarktextarea {
						height: 205rpx;
						width: 494rpx;
					}

					input {
						text-align: left;
						font-size: 28rpx;
					}
				}
			}

			.report-img {
				.img-style {
					margin: 0 0 24rpx 12rpx;
					width: 240rpx;
					height: 240rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					flex-wrap: wrap;

					image {
						margin-left: 20rpx;
						width: 100%;
					}
				}

				.img-style:nth-child(3n+1) {
					margin: 0 0rpx 24rpx 0;
				}
			}
		}

		.btn-row {
			background-color: #e2e2e2;
			padding: 18rpx 20rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;

			input {
				padding: 15rpx 20rpx;
				background-color: #fff;
				border-radius: 45rpx;
			}

			.icon_box {
				width: 45%;
				display: flex;
				justify-content: space-around;

				.send_btn {
					button {
						background-color: #84C0F4;
						color: #e2e2e2;
						width: 110rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-algin: center;
						border-radius: 15rpx;
						margin-top: 5rpx;

						&:active {
							background-color: #78b0dd;
						}
					}
				}
			}
		}
	}
</style>
